<template>
    <div class="order-rescind">
        <el-dialog
            :visible.sync="is_show"
            width="600px"
            title="内审文件撤回"
            @closed="closed"
            center
            append-to-body  
        >
            <el-form
                :model="form"
                :rules="rules"
                label-position="top"
                ref="form">
                <el-form-item
                    label="内审文件撤回原因"
                    prop="reason"
                >
                    <el-input
                        type="textarea"
                        v-model="form.reason"
                        :rows="4"
                        maxlength="300"
                        show-word-limit
                        resize="none"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button @click="is_show = false">取消</el-button>
                <el-button type="primary" @click="submit" v-no-more-click:3000 :loading="btnLoading">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            order_id: 0,
            is_show: false,
            form: {
                reason: ''
            },
            rules: {
                reason: [{required: true, message: '请输入内审文件撤回原因', trigger: 'blur'}],
            },
            btnLoading:false
        }
    },
    methods: {
        showOn(data) {
            this.order_id = data.id
            this.is_show = true
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.btnLoading = true
                    this.$axios.post(`api/order/${this.order_id}/recall/review`, this.form).then(res => {
                        if (res.data.code == 200) {
                            this.$emit('refresh')
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.btnLoading = false
                            this.is_show = false
                        } else {
                            this.btnLoading = false
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            })
                        }
                    })
                }
            })
        },
        closed() {
            this.$refs['form'].resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.order-rescind {
    /deep/.el-dialog {
        .el-dialog__body {
            .el-form-item__label {
                line-height: 20px;
            }
        }
        .el-dialog__footer {
            padding-top: 0;
            text-align: center;
        }
    }
}
</style>
